<script setup lang="ts">
import { usePagination } from '@/hooks/usePagination';
import { toRefs } from 'vue';
import { list } from '@/api/thirdPartyRisk';
import AlarmVideo from '@/components/AlarmVideo/index.vue';
import { adjustWebSocketUrl } from '@/utils/adjustWebSocketUrl';
import useImagePreview from '@/hooks/useImagePreview';

const { tableData, total, queryParams, loading } = toRefs(usePagination<{ cameraIndexCode?: string }>());

const getImagePreview = (path: string) => {
  const { previewImage, imageList } = useImagePreview(path, { serverUrl: '100.70.1.11:9255' });
  return {
    previewImage: previewImage.value,
    imageList: imageList.value
  };
};
const AlarmVideoRef = ref();
const props = defineProps(['mapData']);
const getList = () => {
  loading.value = true;
  queryParams.value = {
    cameraIndexCode: props.mapData.cameraIndexCode,
    ...queryParams.value
  };
  list(queryParams.value).then((response) => {
    tableData.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};
const openVideoAlarm = (url) => {
  AlarmVideoRef.value.url = url;
  AlarmVideoRef.value.open();
};
onMounted(() => {
  getList();
});
</script>

<template>
  <el-scrollbar>
    <div class="card-box">
      <div class="pipe-table">
        <el-table
          :data="tableData"
          v-loading="loading"
          element-loading-background="rgba(0,0,0,0.2)"
          :row-style="{ height: '50px' }"
          :cell-style="{ padding: '0px' }"
          empty-text="暂无数据"
        >
          <el-table-column prop="alarmStartTime" label="报警时间" min-width="180" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="alarmGatherTime" label="设备上报时间" min-width="180" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="statusName" label="处置状态" min-width="120" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="alarmPicPath" label="报警图片" min-width="120" show-overflow-tooltip align="center">
            <template v-slot="scope">
              <el-image
                v-if="scope.row.alarmPicPath"
                style="width: 60px; height: 60px"
                :src="getImagePreview(scope.row.alarmPicPath).previewImage"
                :zoom-rate="1.2"
                :preview-src-list="getImagePreview(scope.row.alarmPicPath).imageList"
                :initial-index="0"
                preview-teleported
                fit="cover"
              />
            </template>
          </el-table-column>
          <el-table-column label="报警视频" min-width="120" show-overflow-tooltip align="center">
            <template v-slot="scope">
              <el-button link size="small" style="color: white" v-if="scope.row.alarmVideoUrl" @click="openVideoAlarm(scope.row.alarmVideoUrl)"
                >查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>
  </el-scrollbar>
  <AlarmVideo ref="AlarmVideoRef" />
</template>

<style scoped lang="scss">
.card-box {
  width: 800px;
  height: 400px;
  padding: 10px;
  z-index: 10;
}

.pipe-table {
  :deep(.el-table) {
    --el-table-border-color: #004e70;
    --el-table-header-bg-color: transparent;
    --el-table-row-hover-bg-color: transparent;
    --el-table-text-color: #fff;
    --el-table-header-text-color: #00ffff;
    --el-table-border: none;

    background-color: transparent;

    .el-table__header-wrapper th {
      background: linear-gradient(180deg, #004db9 0%, #01347b 48%, #014cb5 100%);
      color: #0ff;
    }

    .el-table__body {
      tr {
        background-color: #083577;
        color: #fff;

        td {
          border-bottom: 1px solid #0a73a0;
          cursor: pointer;
        }
      }
    }

    .el-table__empty-block {
      background-color: #003556;

      .el-table__empty-text {
        color: #00ffff;
        font-size: 24px;
      }
    }

    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
        background-color: #3f8af3;
        border-radius: 0.375rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #1c4682;
        border-radius: 0.375rem;
      }
    }
  }

  .pagination-container {
    background: #083577;
    padding: 10px 16px;
    text-align: right;
    margin: 0;

    &.hidden {
      display: none;
    }
  }

  :deep(.el-pagination__total),
  :deep(.el-pagination__jump) {
    color: #fff;
  }
}
</style>
